<template>
  <div class='ele-body ele-body-card'>
    <a-card title="水槽高度和总电极阶梯设置"
            :bordered='true'
            :body-style="{padding: '20px'}">
      <a-form
        ref='sinkHighformRef'
        :model='sinkHighformModel'
        :rules="gatewaytimeRules"
        :label-col='{ md: { span: 16 }, sm: { span: 24 } }'
        :wrapper-col='{ md: { span: 8 }, sm: { span: 24 } }'
        @submit='setSinkHigh'
      >
        <a-row :gutter='8'>
          <a-col :md='16' :sm='24' :xs='24'>
            <a-form-item label='水槽高度(cm):' name='sink_high'>
              <a-input v-model:value='sinkHighformModel.sink_high' placeholder='请输入水槽高度' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='2' :sm='24' :xs='24'>
            <a-button type='primary' html-type='submit' :loading='sinkHighformRefLoading'>
              提交
            </a-button>
          </a-col>
          <a-col :md='6' :sm='24' :xs='24' />
        </a-row>
      </a-form>
    </a-card>

    <a-card
      title="水槽参数设置"
      :bordered='true'
      :body-style="{padding: '20px'}">
      <a-form
        ref='gatewaytimeformRef'
        :model='gatewaytimeformModel'
        :rules="gatewaytimeRules"
        :label-col='{ md: { span: 16 }, sm: { span: 24 } }'
        :wrapper-col='{ md: { span: 8 }, sm: { span: 24 } }'
        @submit='pushHeartInterval'
      >
        <a-row :gutter='8'>
          <a-col :md='16' :sm='24' :xs='24'>
            <a-form-item label='高水位预警阀值(范围0-1023):' name='high_level'>
              <a-input v-model:value='gatewaytimeformModel.high_level' placeholder='请输入高水位预警阀值' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24' :xs='24' />
        </a-row>
        <a-row :gutter='8'>
          <a-col :md='16' :sm='24' :xs='24'>
            <a-form-item label='低水位预警阀值(范围0-1023):' name='low_level'>
              <a-input v-model:value='gatewaytimeformModel.low_level' placeholder='请输入低水位预警阀值' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24' :xs='24' />
        </a-row>

        <a-row :gutter='8'>
          <a-col :md='16' :sm='24' :xs='24'>
            <a-form-item label='高温预警阀值(℃):' name='high_temperature'>
              <a-input v-model:value='gatewaytimeformModel.high_temperature' placeholder='请输入高温预警阀值，单位℃' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24' :xs='24' />
        </a-row>

        <a-row :gutter='8'>
          <a-col :md='16' :sm='24' :xs='24'>
            <a-form-item label='低温预警阀值(℃):' name='low_temperature'>
              <a-input v-model:value='gatewaytimeformModel.low_temperature' placeholder='请输入低温预警阀值，单位℃' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24' :xs='24' />
        </a-row>

        <a-row :gutter='8'>
          <a-col :md='16' :sm='24' :xs='24'>
            <a-form-item label='上报周期频率(秒):' name='mi'>
              <a-input v-model:value='gatewaytimeformModel.mi' placeholder='上报周期频率，单位秒' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24' :xs='24' />
        </a-row>

        <a-row :gutter='8'>
          <a-col :md='16' :sm='24' :xs='24'>
            <a-form-item label='当温度或者水位测量结果超过阈值多少次，才触发TCP发送警告包:' name='wt'>
              <a-input v-model:value='gatewaytimeformModel.wt' placeholder='当温度或者水位测量结果超过阈值多少次，才触发TCP发送警告包' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24' :xs='24' />
        </a-row>

        <a-row :gutter='8'>
          <a-col :md='16' :sm='24' :xs='24'>
            <a-form-item label='上次一触发警报后，下次警报和上次警报之间的最低间隔时间(秒):' name='alarm_interval'>
              <a-input v-model:value='gatewaytimeformModel.alarm_interval' placeholder='请输入上次一触发警报后，下次警报和上次警报之间的最低间隔时间，单位s' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='2' :sm='24' :xs='24'>
            <a-button type='primary' html-type='submit' :loading='gatewaytimeformRefLoading'>
              提交
            </a-button>
          </a-col>
          <a-col :md='1' :sm='24' :xs='24'/>
          <a-col :md='5' :sm='24' :xs='24' />
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import {DeviceCommandDownQueueApi} from '@/api/property/DeviceCommandDownQueueApi';
import {DeviceSinkApi} from '@/api/property/DeviceSinkApi';
import { message } from 'ant-design-vue';

export default {
  name: 'DeviceSinkConfigOther',
  components: {
  },
  props: {
    data: Object
  },
  async created() {
    await this.init();
  },
  data() {
    return {
      loading : false,
      sink : {},

      gatewaytimeformModel : {},
      gatewaytimeRules : {},
      gatewaytimeformRefLoading : false,
      gatewaytimeformRefTimer : undefined,

      sinkHighformModel : {},
      sinkHighformRefLoading : false,
      sinkHighformRefTimer : undefined
    };
  },
  methods: {
    getDetail() {
      let that = this;
      DeviceSinkApi.detailByRecord(this.data.recordId).then(result => {
        let sink = result || {};
        that.sink = sink;
        if (sink.currentConfig != undefined && sink.currentConfig != "") {
          that.gatewaytimeformModel = JSON.parse(sink.currentConfig);
        } else {
          that.gatewaytimeformModel = {};
        }
        that.sinkHighformModel.sink_high = sink.sinkHigh || 0;
      });
    },
    async init() {
      this.getDetail();
    },

    clearGatewaytimeformRef(){
      this.gatewaytimeformRefLoading = false;
      clearInterval(this.gatewaytimeformRefTimer);
    },

    checkProcess(dictate, clearCallback, callback) {
      let params = {
        recordId: this.data.recordId,
        sceneDictate: dictate
      };
      let result = DeviceCommandDownQueueApi.workingDetail(params);
      result
        .then(result => {
          if (!result || !result.dcdqId) { //处理完成了
            clearCallback && clearCallback(); //去掉菊花+清除循环调用
            callback && callback(); //用户自定义
          }
        })
        .catch(() => {
          clearCallback && clearCallback(); //去掉菊花+清除循环调用
        });
    },

    checkHeartInterval(){
      let that = this;
      this.checkProcess(9995, this.clearGatewaytimeformRef, function(){
        that.init();
      });
    },

    pushHeartInterval() {
      this.loading = true;
      let updateDataRecord = {
        recordId: this.data.recordId,
        templateCode: 'watertank',
        updateData: JSON.stringify({ old: JSON.parse(this.sink.currentConfig), update: this.gatewaytimeformModel}),
        dictate : 9995,
        sceneDictate : 9995
      };
      let result = DeviceCommandDownQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.gatewaytimeformRefLoading = true; //转圈
          this.gatewaytimeformRefTimer = setInterval(this.checkHeartInterval, 5000);
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //==============设置水槽高度==========================
    setSinkHigh() {
      this.loading = true;
      let updateDataRecord = {
        recordId: this.data.recordId,
        templateCode: 'watertank',
        updateData: JSON.stringify({ old: this.sink, update: this.sinkHighformModel}),
        dictate : 9990, //代表设置高度
        sceneDictate : 9990
      };
      let result = DeviceCommandDownQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.sinkHighformRefLoading = true; //转圈
          this.sinkHighformRefTimer = setInterval(this.checkSinkHigh, 5000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    checkSinkHigh(){
      let that = this;
      this.checkProcess(9990, this.clearSinkHighformRef, function(){
        that.init();
      });
    },
    clearSinkHighformRef(){
      this.sinkHighformRefLoading = false;
      clearInterval(this.sinkHighformRefTimer);
    }
  }
};
</script>
<style scoped>
/** 用户卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-user-card h4 {
  margin-bottom: 6px;
}
</style>
